<template>
	<view class="notice">
		<block v-if="dataList.length!=0">
			<view class="notice_item" v-for="(item,index) in dataList" :key="index" @click="jump(item)">
				<view class="item_content">
					{{item.title}}
				</view>
				<view class="item_time">{{item.time.substr(0,item.time.length-3)}}</view>
			</view>
		</block>
		<block v-else>
			<view class="no_info">
				<image src="/static/my/news_no.png" mode="widthFix"></image>
				<text>暂无公告</text>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				pageSize: 10, //每页记录数
				pageNum: 1, //当前页码
				listTotal: 0, //列表总数
			}
		},
		onLoad() {
			this.getNoticeList()
		},
		methods: {
			async getNoticeList() {
				uni.showLoading({
					title: '加载中'
				})
				var _this = this
				let data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum
				}
				try {
					const res = await this.$api.getAnnouncementList(data);
					uni.hideLoading()
					this.listTotal = res.result.total
					var el = res.result.records
					if (this.pageNum > 1) {
						this.dataList = this.dataList.concat(el); //将数据拼接在一起
					} else {
						this.dataList = el
					}
				} catch {
					uni.hideLoading()
				} finally {
					setTimeout(res => {
						uni.hideLoading()
					}, 4000)
				}
			},
			// 转跳详情
			jump(item) {
				uni.navigateTo({
					url: '/pages/index/notice/details?id=' + item.id
				})
			}
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			console.log("触底了", this.pageNum, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
			if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {
				// this.moreShop = 'noMore'
			} else {
				// this.moreShop = 'more'
				this.pageNum++; //每触底一次 page + 1;
				this.getNoticeList()
			}
		}
	}
</script>

<style scoped>
	page {
		background: #FCFCFD;
	}

	.notice {
		padding-top: 32rpx;
		padding-bottom: 60rpx;
	}

	.notice_item {
		width: 690rpx;
		margin: 0 auto;
		background: #FFFFFF;
		box-shadow: 0px 8rpx 16rpx #EAEAEA;
		border-radius: 32rpx;
		word-break: break-all;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
	}

	.item_content {
		font-size: 30rpx;
		line-height: 50rpx;
		letter-spacing: -0.4rpx;
		color: #222222;
	}

	.item_time {
		width: 100%;
		margin-top: 26rpx;
		text-align: right;
		font-size: 26rpx;
		line-height: 36rpx;
		color: #999999;
	}
</style>
